<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=1220">
    <meta name="format-detection" content="telphone=no, email=no" />
    <title>海豚Baas Block Explorer</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
        .nodetail{
            width: 100%;
            text-align: center;
            color: #aaa;
            font-size: 13px;
        }
        .loadmore{
            width: 100%;
            width: 200px;
            height: 40px;
            text-align: center;
            color: #909085;
            font-size: 13px;
        }
        .qymc1{
            display: flex;
            width: 500px;
            font-size: 15px;
            height: 40px;
            line-height: 40px;
            padding-left: 19px;
        }
        .jiaoyi .jiaoyi-item>div{
            display: table-cell;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:  nowrap;
            font-size: 14px;
            text-align: center;
            padding: 5px;
            min-width: 100px;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .qymc1{
            display: flex;
            width: 500px;
            font-size: 18px;
            height: 40px;
            line-height: 40px;
        }

        .gd {
            width: 200px;
            height: 40px;
            background-color: #226de5;
            margin: 10px auto;
            color: #fff;
            font-size: 16px;
            display: block;
        }
		
</style>
</head>

<body>


    <header>
        <div class="header">
            <div class="header-left">
                <span data-i18n="header_title">海豚Baas区块浏览器</span>
                <!-- <select onchange="change_lng(value)">
					<option value="chn">简体中文</option>
					<option value="cht">繁體中文</option>
					<option value="en">English</option>
					<option value="jp">日本語</option>
					<option value="kor">한국어</option>
				</select> -->
            </div>
            <div class="header-right">
                <div class="nav">
                    <a data-i18n="header_menu1" href="./index.html">首页</a>
                    <!-- <div class="dropdown">
                        <span><a data-i18n="header_menu2" href="./list.html">交易列表</a></span>
                    </div> -->
                </div>
            </div>
            <div class="header-middle">
                <p><img src="images/logo.png" /></p>
                <div class="header-search">
                    <form action="./block.html" style="display: contents;">
                        <input type="text" data-i18n="[placeholder]header_place" autocomplete="off" placeholder="区块高度" name="hash" class="search-input" />
                        <button class="search-btn" type="submit"></button>
                    </form>
                </div>
            </div>
        </div>
    </header>
    <div id="app">
        <section class="container">
            <div class="container-box">
                <div id="content" class="main-box">
                    <div class="main-box-header bd-bottom">
                        <div class="title" data-i18n="bl_hts"><span data-i18n="bl_title">所属区块</span>：<span id="blockindex">--</span> ，可查看的交易：</div>
                        <div class="more">
                            <a href="javascript:void(0);">
                                <<<span data-i18n="bl_last" onclick="pred(-1)">前一个区块</span>
                            </a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:void(0);"><span data-i18n="bl_next" onclick="pred(1)">后一个区块</span>>></a>
                        </div>
                    </div>
                    <!-- <div>
                        <p class="qymc1"> <span>企业名称：</span> <span style="color:#226de5">xxxxxxxxxxx</span></p>
                        <div class="nodetail">暂无交易数据</div>
                        <div class="jiaoyi" >
                            <div class="jiaoyi-item">
                                <div data-i18n="ts_time">时间</div>
                                <div data-i18n="ts_block">所在区块</div>
                                <div data-i18n="ts_type">交易类型</div>
                                <div data-i18n="ts_account1">源用户</div>
                                <div data-i18n="ts_account2">目的账户</div>
                                <div data-i18n="ts_amount">数量</div>
                                <div data-i18n="ts_hash">交易哈希</div>
                                <div data-i18n="ts_status">状态</div>
                            </div>
                            <div class="jiaoyi-item">
                                <div>2020-06-30 16:17:01</div>
                                <div><a href="#">246091</a></div>
                                <div><span>Mine</span></div>
                                <div>0</div>
                                <div><a href="#">nd0******790</a></div>
                                <div>7</div>
                                <div><a href="#">0f9273d0cc95ffbefc6fd9f1a370f38376c3eddd8d53d70afddc94fe1b318053</a></div>
                                <div>成功</div>
                            </div>
                            <button class="gd">加载更多 ∨</button>
                        </div>
                        <div style="width: 100%;text-align: center;" onmouseover="javascript:this.style.backgroundColor='#dadadaad'" onmouseout="javascript:this.style.backgroundColor='#fff'">
                            <button class="loadmore">加载更多∨</button>
                        </div>
                    </div> -->
                    


                </div>

                <div class="main-box">
                    <div class="main-box-header bd-bottom">
                        <div class="title">交易详情：</div>
                        
                    </div>
                    <div id='detail' class="assets-detail-cont">
                        
                    </div>
                    <!-- <div class="row-data">
                        <div class="row-btn"><a :class="{'active':isShowRow}" @click="showRow" data-i18n="src_code" style="cursor: pointer;">原始数据</a></div>
                        <div class="row-json" v-show="isShowRow">
                            <pre><code id="codeshow">

                            </code></pre>
                            
                        </div>
                    </div> -->
                </div>
            </div>
        </section>
    </div>

    

</body>
<script src="./js/vue.js"></script>
<script src="./js/config.js"></script>
    <script>
        var globalBlockIndex = -1;
        var allheaders = {};
        var allDatas = {};

        let arrJson = []
        $(function () {
            find();

        });
        var find = function(){
            var indexhash = decodeURI(window.location.search).substring(6);
            globalBlockIndex = decodeURI(window.location.search).substring(6) -0
            $("[name='hash']").eq(0).val(indexhash.substring(6));
            //alert($("[name='hash']").eq(0).val(indexhash.substring(6)));
            $.ajax({
                type : 'post',
                url : 'http://' +  organ + '/block/getBlockDetail?blockIndex=' + indexhash,
				xhrFields:{ withCredentials: true },
                data : {},
                success : function(data){
                    if(data.code == -1){
                        alert(data.msg);
                    }else{
                        //渲染页面
                        render(data);
                    }
                }
            });   
        }
        const test = function(hashNo){
            console.log(hashNo)
            const arr = arrJson.filter(item=>item.hashNo===hashNo)
            let html = '<div class="assets-table">'
            
            for(item in arr[0]) {
                if(item ==='contractContent') {
                html+=`<div class="assets-item"><div>${item}</div><div><pre style="color:#000">${arr[0][item]}</pre></div></div>`
                } else {
                    html+=`<div class="assets-item"><div>${item}</div><div><span>${arr[0][item]}</span></div></div>`
                }
            }
             html+=`</div>`
             $('#detail').html(html)
        }
        var render = function(res){
            const data = res.o
            $("#blockindex").html(data.blockIndex);
            arrJson = JSON.parse(data.dataJson)
            let html = `<div><div class="jiaoyi"><div class="jiaoyi-item">
            <div>hash值</div><div>jsoncreatetime</div><div>type</div></div>`
            arrJson.forEach(el => {
                html+= `
                   <div class="jiaoyi-item"  onclick="test('${el.hashNo}')">
                    <div>${el.hashNo}</div><div>${el.jsoncreatetime}</div><div>${el.type}</div>
                   </div>
                `
            });
            html+= '</div></div>'
            $('#content').append(html)
            showDetail0(JSON.parse(data.dataJson));
        }
        var loadmore = function(obj){
            var divId = $(obj).attr("divid");
            var enterpriseId = divId;
            var blockIndex = $(obj).attr("blockIndex");
            var index = $(obj).attr("index");
            var size = obj.getAttribute("size");
            var start = index*size;
            $.ajax({
                type : 'post',
                url : 'https://www.hitebaas.com:8100/baas-platform/api/finde',
				xhrFields:{ withCredentials: true },
                data : JSON.stringify({
                    "enterpriseId" : enterpriseId,
                    "blockIndex" : blockIndex,
                    "index" : index,
                    "size" : size
                }),
                contentType : 'application/json;charset=UTF-8',
                success : function(data){
                    var rows = data.data;
                    var headers = allheaders[divId];
                    var html = [];
                    for(var j=0;j<rows.length;j++){
                        var dm = rows[j];
                        var dataObject = {};
                        for(var k = 0;k < dm.length;k++){
                            dataObject[dm[k].key] = dm[k].value;
                        }
                        allDatas[divId].push(dataObject);
                        html.push('<div class="jiaoyi-item">');
                        for(var k=0;k<headers.length;k++){
                            html.push('<div title="' + dataObject[headers[k].key] + '" style="cursor : pointer;" onclick="showDetail(this, ' + divId + ',' + (start + j) + ')">' + dataObject[headers[k].key] + '</div>');
                        }
                        html.push('</div>');
                    }
                    $("#foot" + divId).remove();
                    if(rows.length >= 10){
                         $("#foot"  + divId).remove();
                        html.push('<div id="foot' + divId + '" style="width: 100%;text-align: center;" onmouseover="javascript:this.style.backgroundColor=\'#dadadaad\'" onmouseout="javascript:this.style.backgroundColor=\'#fff\'">');
                            html.push('<button class="loadmore" divid="' + divId + '" blockIndex="' + blockIndex + '" index="' + (++index) + '" size="10" onclick="loadmore(this)">加载更多∨</button>');
                        html.push('</div>');
                    } 
                    $("#jiaoyi" + divId).append(html.join(''));
                }
            });
        }
        var showDetail = function(obj, divId, index){
            var headers = allheaders[divId];
            var rows = allDatas[divId];
            var row = rows[index];
            var html = [];
            var json = {};
            html.push('<div class="assets-table">');
            for(var i=0;i<headers.length;i++){
                html.push('<div class="assets-item">');
				
                    var strs=changeValue(headers[i].value);
                    html.push('<div>' + strs + '</div>');

                    html.push('<div><span>' + row[headers[i].key] +  '</span></div>');
                html.push('</div>');
                json[headers[i].map] = row[headers[i].key];
            }
            html.push('</div>');
            $("#detail").html(html.join(''));        
            //json
            $("#codeshow").html(JSON.stringify(json, null, "\t"));
        }
        var showDetail0 = function(tradeInfo){
            console.log(tradeInfo)
            if(!tradeInfo){
                return;
            }
            var headers = tradeInfo.headers;
            var row = tradeInfo.tradeInfo;
            var html = [];
            var json = {};
            html.push('<div class="assets-table">');
            for(var i=0;i<headers.length;i++){
				var tmp = [];
                var rowValue = row[headers[i].key] ? row[headers[i].key] : "";
                tmp.push('<div class="assets-item">');
					var strs=changeValue(headers[i].value);
                    tmp.push('<div>' + strs + '</div>');
					var value = rowValue + "";
					 if (value.split(".").length > 1 && strs!="contentjson") {

                if (value.split(".")[1] == "jpg" || value.split(".")[1] == "png" || value.split(".")[1] == "bmp" || value.split(".")[1] == "jpeg") {

                    tmp.push('<div><img style="height: 200px;vertical-align: middle;" src="https://tokenstring.oss-cn-shenzhen.aliyuncs.com/cochain_img/' + value + '"   /></div>');
                } else {
                    tmp.push('<div><span>' + rowValue + '</span></div>');
                }
            } else {

                tmp.push('<div><span>' + rowValue + '</span></div>');
            }

                tmp.push('</div>');
				if(rowValue!=""){
				
					html.push(tmp.join(''));
				}
                json[headers[i].map] = row[headers[i].key];
            }
            html.push('</div>');
            $("#detail").html(html.join(''));        
            //json
            $("#codeshow").html(JSON.stringify(json, null, "\t"));
        }
        var pred = function(i){
            var newblockIndex = globalBlockIndex + i;
            //alert
            window.location.href = window.location.href.split("?")[0] + "?hash=" + newblockIndex;
        }
        $(function(){
            initEvent();
        });
        function initEvent(){
            var app = new Vue({
                el: '#app',
                data: {
                    isShowRow: false,
                },
                methods: {
                    showRow: function(){
                        this.isShowRow = !this.isShowRow;
                    }
                }
            })
        }
		var changeValue = function(data){
		if(data=="blockIndex"){
			return "区块号";
		}
		if(data=="content"){
		return "内容";
		}
		if(data=="hashNo"){
		return "hash值";
		}
		if(data=="createtime"){
		return "时间";
		}
		if(data=="address"){
		return "地址";
		}
		if(data=="mobile"){
		return "电话";
		}
		if(data=="WVQR"){
		return "微信二维码";
		}
		if(data=="companyWeb"){
		return "公司网址";
		}
		if(data=="head"){
		return "头像";
		}
		if(data=="number"){
		return "工号";
		}
		if(data=="mailbox"){
		return "邮箱";
		}
		if(data=="phone"){
		return "手机号";
		}
		if(data=="name"){
		return "姓名";
		}
		if(data=="logo"){
		return "公司logo";
		}
		if(data=="position"){
		return "职位";
		}
		if(data=="departure"){
		return "在职状态";
		}
		if(data=="department"){
		return "部门";
		}
		if(data=="enterpriseName"){
		return "公司名称";
		}
		return data;
		}
    </script>
</html>
